ActiveUsersBarChart.render - Code Metrics - myems/myems-web - Measure and Improve Code Quality continuously with Scrutinizer

ActiveUsersBarChart.render B
last analyzed 2021-02-20 11:16 UTC

↳ Parent: ActiveUsersBarChart

Complexity

Conditions

Size

Total Lines	75
Code Lines	66

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	66
dl	0
loc	75
rs	8.1127
c	0
b	0
f	0
cc	1

How to fix Long Method

import React, { Component } from 'react';
import { Bar } from 'react-chartjs-2';
import { Link } from 'react-router-dom';
import range from 'lodash/range';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Card, CardHeader, CardBody, ListGroup, ListGroupItem, CardFooter } from 'reactstrap';
import { rgbaColor } from '../../helpers/utils';
import { activeUserHistory } from '../../data/dashboard/activeUsers';

const dividerBorder = '1px solid rgba(255, 255, 255, 0.15)';
const listItemBorderColor = 'rgba(255, 255, 255, 0.05)';

const chartOptions = {
  legend: { display: false },
  scales: {
    yAxes: [
      {
        display: false,
        stacked: true
      }
    ],
    xAxes: [
      {
        stacked: false,
        ticks: { display: false },
        barPercentage: 0.9,
        categoryPercentage: 1.0,
        gridLines: {
          color: rgbaColor('#fff', 0.1),
          display: false
        }
      }
    ]
  }
};

class ActiveUsersBarChart extends Component {
  _isMounted = false;
  refreshInterval;
  refreshTimeout;
  state = {
    activeUserHistory,
    currentActiveUser: activeUserHistory[activeUserHistory.length - 1],
    chartData: {
      labels: range(1, 26),
      datasets: [
        {
          label: 'Users',
          backgroundColor: rgbaColor('#fff', 0.3),
          data: []
        }
      ]
    }
  };

  simulateActiveUsers = () => {
    this.refreshInterval = setInterval(() => {
      const currentActiveUser = Math.floor(Math.random() * (120 - 60) + 60);
      const activeUserHistory = [...this.state.activeUserHistory];
      activeUserHistory.shift();
      if (this._isMounted) {
        this.setState({ activeUserHistory }, () => {
          this.refreshTimeout = setTimeout(() => {
            const activeUserHistory = [...this.state.activeUserHistory];
            activeUserHistory.push(currentActiveUser);
            if (this._isMounted) {
              this.setState({ activeUserHistory, currentActiveUser });
            }
          }, 500);
        });
      }
    }, 2000);
  };

  componentDidMount() {
    this._isMounted = true;
    this.simulateActiveUsers();
  }

  componentWillUnmount() {
    this._isMounted = false;
    clearInterval(this.refreshInterval);
    clearTimeout(this.refreshTimeout);
  }

  render() {
    const chartData = {
      ...this.state.chartData,
      datasets: [
        {
          ...this.state.chartData.datasets[0],
          data: this.state.activeUserHistory
        }
      ]
    };

    return (
      <Card className="h-100 bg-gradient">
        <CardHeader className="bg-transparent">
          <h5 className="text-white">Active users right now</h5>
          <div className="real-time-user display-1 font-weight-normal text-white">{this.state.currentActiveUser}</div>
        </CardHeader>
        <CardBody className="text-white fs--1">
          <p className="pb-2" style={{ borderBottom: dividerBorder }}>
            Page views per second
          </p>
          <Bar data={chartData} options={chartOptions} width={10} height={4} />
          <ListGroup flush className="mt-4">
            <ListGroupItem
              className="bg-transparent d-flex justify-content-between px-0 py-1 font-weight-semi-bold border-top-0"
              style={{ borderColor: listItemBorderColor }}
            >
              <p className="mb-0">Top Active Pages</p>
              <p className="mb-0">Active Users</p>
            </ListGroupItem>
            <ListGroupItem
              className="bg-transparent d-flex justify-content-between px-0 py-1"
              style={{ borderColor: listItemBorderColor }}
            >
              <p className="mb-0">/bootstrap-themes/</p>
              <p className="mb-0">3</p>
            </ListGroupItem>
            <ListGroupItem
              className="bg-transparent d-flex justify-content-between px-0 py-1"
              style={{ borderColor: listItemBorderColor }}
            >
              <p className="mb-0">/tags/html5/</p>
              <p className="mb-0">3</p>
            </ListGroupItem>
            <ListGroupItem
              className="bg-transparent d-xxl-flex justify-content-between px-0 py-1 d-none"
              style={{ borderColor: listItemBorderColor }}
            >
              <p className="mb-0">/</p>
              <p className="mb-0">2</p>
            </ListGroupItem>
            <ListGroupItem
              className="bg-transparent d-xxl-flex justify-content-between px-0 py-1 d-none"
              style={{ borderColor: listItemBorderColor }}
            >
              <p className="mb-0">/preview/falcon/dashboard/</p>
              <p className="mb-0">2</p>
            </ListGroupItem>
            <ListGroupItem
              className="bg-transparent d-flex justify-content-between px-0 py-1"
              style={{ borderColor: listItemBorderColor }}
            >
              <p className="mb-0">/100-best-themes...all-time/</p>
              <p className="mb-0">1</p>
            </ListGroupItem>
          </ListGroup>
        </CardBody>
        <CardFooter className="text-right bg-transparent" style={{ borderTop: dividerBorder }}>
          <Link className="text-white" to="#!">
            Real-time report
            <FontAwesomeIcon icon="chevron-right" transform="down-1" className="ml-1 fs--1" />
          </Link>
        </CardFooter>
      </Card>
    );
  }
}

export default ActiveUsersBarChart;


1			import React, { Component } from 'react';
2			import { Bar } from 'react-chartjs-2';
3			import { Link } from 'react-router-dom';
4			import range from 'lodash/range';
5			import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6			import { Card, CardHeader, CardBody, ListGroup, ListGroupItem, CardFooter } from 'reactstrap';
7			import { rgbaColor } from '../../helpers/utils';
8			import { activeUserHistory } from '../../data/dashboard/activeUsers';
9
10			const dividerBorder = '1px solid rgba(255, 255, 255, 0.15)';
11			const listItemBorderColor = 'rgba(255, 255, 255, 0.05)';
12
13			const chartOptions = {
14			legend: { display: false },
15			scales: {
16			yAxes: [
17			{
18			display: false,
19			stacked: true
20			}
21			],
22			xAxes: [
23			{
24			stacked: false,
25			ticks: { display: false },
26			barPercentage: 0.9,
27			categoryPercentage: 1.0,
28			gridLines: {
29			color: rgbaColor('#fff', 0.1),
30			display: false
31			}
32			}
33			]
34			}
35			};
36
37			class ActiveUsersBarChart extends Component {
38			_isMounted = false;
39			refreshInterval;
40			refreshTimeout;
41			state = {
42			activeUserHistory,
43			currentActiveUser: activeUserHistory[activeUserHistory.length - 1],
44			chartData: {
45			labels: range(1, 26),
46			datasets: [
47			{
48			label: 'Users',
49			backgroundColor: rgbaColor('#fff', 0.3),
50			data: []
51			}
52			]
53			}
54			};
55
56			simulateActiveUsers = () => {
57			this.refreshInterval = setInterval(() => {
58			const currentActiveUser = Math.floor(Math.random() * (120 - 60) + 60);
59			const activeUserHistory = [...this.state.activeUserHistory];
60			activeUserHistory.shift();
61			if (this._isMounted) {
62			this.setState({ activeUserHistory }, () => {
63			this.refreshTimeout = setTimeout(() => {
64			const activeUserHistory = [...this.state.activeUserHistory];
65			activeUserHistory.push(currentActiveUser);
66			if (this._isMounted) {
67			this.setState({ activeUserHistory, currentActiveUser });
68			}
69			}, 500);
70			});
71			}
72			}, 2000);
73			};
74
75			componentDidMount() {
76			this._isMounted = true;
77			this.simulateActiveUsers();
78			}
79
80			componentWillUnmount() {
81			this._isMounted = false;
82			clearInterval(this.refreshInterval);
83			clearTimeout(this.refreshTimeout);
84			}
85
86			render() {
87			const chartData = {
88			...this.state.chartData,
89			datasets: [
90			{
91			...this.state.chartData.datasets[0],
92			data: this.state.activeUserHistory
93			}
94			]
95			};
96
97			return (
98			<Card className="h-100 bg-gradient">
99			<CardHeader className="bg-transparent">
100			<h5 className="text-white">Active users right now</h5>
101			<div className="real-time-user display-1 font-weight-normal text-white">{this.state.currentActiveUser}</div>
102			</CardHeader>
103			<CardBody className="text-white fs--1">
104			<p className="pb-2" style={{ borderBottom: dividerBorder }}>
105			Page views per second
106			</p>
107			<Bar data={chartData} options={chartOptions} width={10} height={4} />
108			<ListGroup flush className="mt-4">
109			<ListGroupItem
110			className="bg-transparent d-flex justify-content-between px-0 py-1 font-weight-semi-bold border-top-0"
111			style={{ borderColor: listItemBorderColor }}
112			>
113			<p className="mb-0">Top Active Pages</p>
114			<p className="mb-0">Active Users</p>
115			</ListGroupItem>
116			<ListGroupItem
117			className="bg-transparent d-flex justify-content-between px-0 py-1"
118			style={{ borderColor: listItemBorderColor }}
119			>
120			<p className="mb-0">/bootstrap-themes/</p>
121			<p className="mb-0">3</p>
122			</ListGroupItem>
123			<ListGroupItem
124			className="bg-transparent d-flex justify-content-between px-0 py-1"
125			style={{ borderColor: listItemBorderColor }}
126			>
127			<p className="mb-0">/tags/html5/</p>
128			<p className="mb-0">3</p>
129			</ListGroupItem>
130			<ListGroupItem
131			className="bg-transparent d-xxl-flex justify-content-between px-0 py-1 d-none"
132			style={{ borderColor: listItemBorderColor }}
133			>
134			<p className="mb-0">/</p>
135			<p className="mb-0">2</p>
136			</ListGroupItem>
137			<ListGroupItem
138			className="bg-transparent d-xxl-flex justify-content-between px-0 py-1 d-none"
139			style={{ borderColor: listItemBorderColor }}
140			>
141			<p className="mb-0">/preview/falcon/dashboard/</p>
142			<p className="mb-0">2</p>
143			</ListGroupItem>
144			<ListGroupItem
145			className="bg-transparent d-flex justify-content-between px-0 py-1"
146			style={{ borderColor: listItemBorderColor }}
147			>
148			<p className="mb-0">/100-best-themes...all-time/</p>
149			<p className="mb-0">1</p>
150			</ListGroupItem>
151			</ListGroup>
152			</CardBody>
153			<CardFooter className="text-right bg-transparent" style={{ borderTop: dividerBorder }}>
154			<Link className="text-white" to="#!">
155			Real-time report
156			<FontAwesomeIcon icon="chevron-right" transform="down-1" className="ml-1 fs--1" />
157			</Link>
158			</CardFooter>
159			</Card>
160			);
161			}
162			}
163
164			export default ActiveUsersBarChart;
165

myems / myems-web

ActiveUsersBarChart.render B last analyzed 2021-02-20 11:16 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

ActiveUsersBarChart.render B
last analyzed 2021-02-20 11:16 UTC